<template>
  <div class="header1">
    <span>
      <span class="iconfont icon-fanhui" v-if="pathname=='detail'" @click="goback"></span>
    </span>
    <span>
      <slot></slot>
    </span>
    <span>
      <img v-if="pathname!='detail'" class="nav-icon"
        src="//p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png">
    </span>
  </div>
</template>

<script>
export default {
  name: "header1",
  data: function () {
    return {
      pathname: "",
    }
  },
  mounted () {
    this.pathname = this.$route.name
  },
  methods: {
    goback: function () {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
/* scoped 只在该组件起作用 */
.header1 {
  width: 100%;
  box-sizing: border-box;
  height: 50.5px;
  line-height: 50.5px;
  font-size: 18px;
  display: flex;
  background: #e54847;
  color: #fff;
}
.header1 > span:nth-of-type(1),
.header1 > span:nth-of-type(3) {
  width: 15%;
  text-align: center;
}
.header1 > span:nth-of-type(1) > span {
  font-size: 22px;
}
.header1 > span:nth-of-type(2) {
  width: 70%;
  text-align: center;
}
.header1 span:nth-of-type(3) img {
  width: 17px;
  height: 16px;
  line-height: 16px;
  margin-left: 24px;
  vertical-align: middle;
}
</style>